<template>
	<view class="add-container">
		<!-- 拍照上传区域 -->
		<view class="photo-section">
			<view class="photo-box" @click="takePhoto" v-if="!tempFilePath">
				<uni-icons type="camera" size="40" color="#999"></uni-icons>
				<text class="photo-tip">点击拍照</text>
			</view>
			<image v-else :src="tempFilePath" mode="aspectFill" class="preview-image"></image>
		</view>
		
		<!-- 药品信息编辑区域 -->
		<view class="form-section">
			<view class="form-item">
				<text class="label">药品名称</text>
				<input type="text" v-model="medicineInfo.drugName" placeholder="请输入药品名称" />
			</view>
			
			<view class="form-item">
				<text class="label">药品剂量</text>
				<input type="text" v-model="medicineInfo.drugDosage" placeholder="请输入药品剂量" />
			</view>
			
			<view class="form-item">
				<text class="label">服用频率</text>
				<input type="text" v-model="medicineInfo.frequency" placeholder="例如：每天3次，饭后服用" />
			</view>
			
			<view class="form-item">
				<text class="label">生产日期</text>
				<picker mode="date" :value="medicineInfo.productionTime" @change="onProductionDateChange">
					<view class="picker-value">{{ medicineInfo.productionTime || '请选择生产日期' }}</view>
				</picker>
			</view>
			
			<view class="form-item">
				<text class="label">过期日期</text>
				<picker mode="date" :value="medicineInfo.useLessTime" @change="onExpiryDateChange">
					<view class="picker-value">{{ medicineInfo.useLessTime || '请选择过期日期' }}</view>
				</picker>
			</view>
			
			<view class="form-item">
				<text class="label">自定义剂量</text>
				<input type="text" v-model="medicineInfo.customDosage" placeholder="例如：每次2片" />
			</view>
		</view>
		
		<!-- 保存按钮 -->
		<button class="save-btn" type="primary" @click="saveMedicine" style="background-color: #8bdee6;">保存</button>
	</view>
</template>

<script>
import { useMedicineStore } from '../../store/medicine';
const medicineStore = useMedicineStore()

export default {
	setup(){
		return{
			medicineStore
		}
	},
	data() {
		return {
			tempFilePath: '', // 临时图片路径
			medicineInfo: {
				drugName: '',
				drugDosage: '',
				frequency: '',
				productionTime: '',
				useLessTime: '',
				customDosage: ''
			}
		}
	},
	methods: {
		// 拍照
		takePhoto() {
			uni.chooseImage({
				count: 1,
				sourceType: ['camera'],
				success: (res) => {
					this.tempFilePath = res.tempFilePaths[0];
				}
			});
		},
		// 生产日期选择
		onProductionDateChange(e) {
			this.medicineInfo.productionTime = e.detail.value;
		},
		// 过期日期选择
		onExpiryDateChange(e) {
			this.medicineInfo.useLessTime = e.detail.value;
		},
		// 上传图片
		uploadImage() {
			return 'http////'
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: 'YOUR_BACKEND_API_URL', // 替换为您的后端API地址
					filePath: this.tempFilePath,
					name: 'image',
					formData: {
						'name': this.medicineInfo.name,
						'type': 'medicine'
					},
					success: (uploadRes) => {
						resolve(uploadRes.data);
					},
					fail: (err) => {
						reject(err);
					}
				});
			});
		},
		// 保存药品信息
		async saveMedicine() {
			if (!this.tempFilePath) {
				uni.showToast({
					title: '请先拍照上传药品图片',
					icon: 'none'
				});
				return;
			}
			if (!this.medicineInfo.drugName) {
				uni.showToast({
					title: '请输入药品名称',
					icon: 'none'
				});
				return;
			}
			if (!this.medicineInfo.drugDosage) {
				uni.showToast({
					title: '请输入药品剂量',
					icon: 'none'
				});
				return;
			}

			// uni.showLoading({
			// 	title: '保存中...'
			// });

			try {
				// 先上传图片
				const imageResult = await this.uploadImage();
				
				// 构建完整的药品信息
				const medicineData = {
					...this.medicineInfo,
					imageUrl: imageResult, // 这里假设后端返回图片URL
				};
				

				medicineStore.addMedicine(medicineData)
				// 发送药品信息到后端
				
				return
				uni.hideLoading();
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				});

				setTimeout(() => {
					uni.navigateBack();
				}, 1500);

			} catch (error) {
				uni.hideLoading();
				uni.showToast({
					title: '保存失败，请重试',
					icon: 'none'
				});
				console.error('保存失败：', error);
			}
		}
	}
}
</script>

<style lang="scss">
.add-container {
	padding: 30rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.photo-section {
	margin-bottom: 40rpx;
	
	.photo-box {
		width: 100%;
		height: 400rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.photo-tip {
			font-size: 28rpx;
			color: #999;
			margin-top: 20rpx;
		}
	}
	
	.preview-image {
		width: 100%;
		height: 400rpx;
		border-radius: 16rpx;
	}
}

.form-section {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 40rpx;
	
	.form-item {
		padding: 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
		
		&:last-child {
			border-bottom: none;
		}
		
		.label {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 10rpx;
			display: block;
		}
		
		input {
			height: 60rpx;
			font-size: 28rpx;
			width: 100%;
			border: 1rpx solid #ddd;
			border-radius: 8rpx;
			padding: 10rpx;
			box-sizing: border-box;
		}
		
		.picker-value {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			color: #333;
			border: 1rpx solid #ddd;
			border-radius: 8rpx;
			padding: 0 10rpx;
			box-sizing: border-box;
		}
	}
}

.save-btn {
	width: 90%;
	margin: 0 auto;
	background-color: #2ac2d1;
	color: #fff;
	font-size: 32rpx;
	border-radius: 50rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	
	&::after {
		border: none;
	}
}
</style>